<script setup>
  import { onMounted, watch, inject, onBeforeUnmount } from 'vue';
  // 经纬度转换
  import { transformGCJ2WGS } from "@/function/lib/transformGCJ2WGS.js";
  // 生成uuid
  import { uuid } from "@/function/lib"

  defineOptions({name: ''});
  let geoJSON = null;
  const props = defineProps({})
  const emits = defineEmits(['TMapClick']);
  const isIncludeSub = inject('isIncludeSub');
  const mapParams = inject('mapParams');

  // 地图实例
  let TDMap = null, TDMapOverLay = {};
  // 多边形多环关联表
  const ManyTDMapOverLay = new Map();
  async function loadGoJson() {
    geoJSON = await fetch(`https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json`).then(res => res.json()).then(data => {
      return data;
    })
    setTimeout(() => {
      loadTMap()
    }, 500);
  }
  // 加载天地图
  async function loadTMap() {
    if (TDMap) destructionTMap();
    // 中心点，转换坐标
    const centerData = transformGCJ2WGS(Number(geoJSON.features[0].properties.centroid[1] || 27.9937307619152), Number(geoJSON.features[0].properties.centroid[0] || 120.69941136528779));
    const lat = Number(centerData.lat);
    const lng = Number(centerData.lon);
    // 初始化地图对象
    if(!TDMap) TDMap = new T.Map("chartMap");
    const center = new T.LngLat(lng, lat);
    // 设置显示地图的中心点和级别
    TDMap.centerAndZoom(center, 5);
    // 创建一个用于渲染地图事件的方法
    let drawMapFn = (points, adcode, id) => {
      try {
        // 创建面对象
        TDMapOverLay[id] = new T.Polygon(points, {
          color: "blue", weight: 3, opacity: 1, fillColor: "#FFFFFF", fillOpacity: 0.3, lineStyle: 'dashed'
        })
        // 监听面对象移入事件，加入背景色
        TDMapOverLay[id].addEventListener("mouseover", _ => {
          ManyTDMapOverLay.get(adcode).forEach(item => {
            TDMapOverLay[item].setFillColor('rgb(13, 202, 230)');
            TDMapOverLay[item].setFillOpacity(0.6);
          })
          // event.target.setFillColor('rgb(13, 202, 230)');
          // event.target.setFillOpacity(0.6);
        });
        // 监听面对象移出事件，淡化背景色
        TDMapOverLay[id].addEventListener("mouseout", _ => {
          ManyTDMapOverLay.get(adcode).forEach(item => {
            TDMapOverLay[item].setFillColor('#FFFFFF');
            TDMapOverLay[item].setFillOpacity(0.3);
          })
        });
        // 向地图上添加叠加物
        TDMap.addOverLay(TDMapOverLay[id]);
      } catch (error) {
        console.log('error', error);
      }
    }
    // 循环遍历geoJson解析子区域
    geoJSON.features.forEach(geoItem => {
      // 分析coordinates数据若多个数组则表示有多个环，需要创建多个面对象并关联起来
      let coordinates = geoItem.geometry?.coordinates || [];
      const { adcode } = geoItem.properties;
      ManyTDMapOverLay.set(adcode, []);
      // 多环数据需要将多个面对象关联起来（通过code进行关联）
      if(geoItem.geometry.type === 'MultiPolygon') {
        coordinates.forEach((item) => {
          const id = uuid();
          ManyTDMapOverLay.get(adcode).push(id);
          // 多边形经纬度转换
          const points = item[0].map(ele => {
            const latLng = transformGCJ2WGS(ele[1], ele[0]);
            return new T.LngLat(latLng.lon, latLng.lat);
          });
          drawMapFn(points, adcode, id);
        })
      }
      // 单环数据直接创建面对象
      if(geoItem.geometry.type === 'Polygon') {
        const id = uuid();
        ManyTDMapOverLay.get(adcode).push(id);
        // 多边形经纬度转换
        const points = coordinates[0].map(item => {
          const latLng = transformGCJ2WGS(item[1], item[0]);
          return new T.LngLat(latLng.lon, latLng.lat);
        })
        drawMapFn(points, adcode, id);
      }
    })
    drawMapFn = null;
  }

  // 销毁天地图
  const destructionTMap = (addChildren = true) => {
    if (TDMap) {
      TDMap = null;
      // 直接将节点给删掉
      const parentEl = document.getElementById('mainMap');
      const cahildrenEl = document.getElementById('chartMap');
      if(cahildrenEl) parentEl.removeChild(cahildrenEl);
      if(!addChildren) return;
      // 然后再手动将节点加进来
      const newCahildrenEl = document.createElement("div");
      newCahildrenEl.id = 'chartMap'
      newCahildrenEl.style = 'height: 100%;width: 100%;'
      parentEl.appendChild(newCahildrenEl)
    }
  }
  
  onMounted(() => {
    loadGoJson();
  });

  onBeforeUnmount(() => {
    destructionTMap(false);
  })

  // 子组件暴露
  defineExpose({});

</script>

<template>
  <div id="mainMap" style="height: 100%;width: 100%;">
    <div id="chartMap" style="height: 100%;width: 100%;"></div>
  </div>
</template>

<style lang="less" scoped>

</style>
